.sp {

	&- {

		// 查看各种报告
		&query {
			padding: 0 24rpx;

			&__ {

				&empty {
					padding: 316rpx 0 0;
				}

				&header {
					.size(702, 268);
					.boxing();
					padding: 90rpx 6rpx 0 6rpx;
					.font(56, 78, #222, left);
					background: url('@{cdn}cost/background.png') 475rpx center no-repeat;
					background-size: 195rpx 180rpx;
				}

				&person {
					.circle(702, 372, 20rpx);
					.back-color(#fff);
					padding: 0 34rpx;
					.boxing();
					margin: 0 auto;

					&- {

						&item {
							.f-center-space();
							padding-top: 50rpx;
						}

						&name {
							position: relative;
							flex: 1;

							&:after {
								content: '';
								position: absolute;
								left: 0;
								top: 74rpx;
								.size(108, 2);
								.back-color(#ddd);
							}

							label,
							text {
								display: block;
							}

							label {
								.font(36, 50, #222, left);
							}

							text {
								.font(30, 42, #6582F9, left);
								background: url('@{cdn}cost/card-nor.png') left center no-repeat;
								background-size: 38rpx 30rpx;
								padding-left: 50rpx;
								margin-top: 50rpx;
							}
						}

						&link {
							position: relative;
							.font(32, 46, #6582F9, left);
							padding-left: 24rpx;

							&:after {
								content: '';
								position: absolute;
								top: 50%;
								left: 0;
								transform: translateY(-50%);
								.size(2, 50);
								.back-color(#ddd);
							}
						}

						&submit {
							padding: 50rpx 12rpx;
						}
					}
				}

				&desc {
					margin-top: 50rpx;

					label {
						display: block;
						margin-bottom: 24rpx;
						.font(28, 40, #6582F9, left);
						padding-left: 32rpx;
						background: url('@{cdn}cost/warning.png') left center no-repeat;
						background-size: 26rpx;
					}

					&-content {
						.font(26, 36, #666, left);
					}
				}

				&tabs {
					position: absolute;
					width: 750rpx;
					top: 0;
					left: 0;
					background: #fff;
				}

				&hastab {
					padding-top: 86rpx;
				}

				&error {
					margin-top: 50rpx;
					.font(28, 40, #FF5F5F, left);
					padding-left: 38rpx;
					background: url('@{cdn}cost/error.png') left center no-repeat;
					background-size: 26rpx;
				}
			}
		}

		// 费用查询
		&cost {

			&__ {

				&list {
					padding: 24rpx 0;
				}

				&item {
					.circle(702, 180, 20rpx);
					.back-color(#fff);
					padding: 24rpx;
					.boxing();
					margin-bottom: 24rpx;

					&- {

						&header {
							.f-center-space();
							padding-bottom: 24rpx;

							label,
							text {
								display: block;
							}

							label {
								.font(30, 42, #222, left);
								font-weight: bold;
							}

							label {
								.font(30, 42, #FF811E, left);
							}
						}

						&footer {
							padding-top: 24rpx;
							border-top: 1px solid #eee;
							.font(28, 40, #222, left);
						}
					}
				}

				&detail {
					.back-color(#fff);
					.radius(20);
					padding: 24rpx;
					margin-top: 24rpx;
					.boxing();

					&- {

						&boxes {
							&:not(:first-child) {
								margin-top: 50rpx;
							}

							&:not(:last-child) {
								border-bottom: 1px solid #eee;
							}
						}

						&row {
							.flex();
							margin-top: 24rpx;

							&:last-child {
								margin-bottom: 50rpx;
							}

							label,
							text {
								display: block;
							}

							label {
								width: 174rpx;
								.font(28, 40, #666, left);
							}

							text {
								.font(28, 40, #222, left);
							}
						}

						&title {
							.font(32, 46, #222);
							.boxing();
							padding: 24rpx 0;
							border-bottom: 1px solid #eee;
						}

						&item {
							padding: 24rpx 0;

							&:not(:last-child) {
								border-bottom: 1px solid #eee;
							}
						}

						&price {
							.f-center-space();

							label {
								.font(28, 40, #666);
							}

							text {
								.font(28, 40, #222);
							}
						}

						&nums {
							margin-top: 4rpx;
							.font(28, 40, #666, right);
						}
					}
				}
			}
		}

		// 就诊人
		&patient {
			padding-bottom: 140rpx;
			.boxing();

			&__ {

				&footer {
					position: fixed;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 120rpx;
					background: #FFF;
					box-shadow: 0px 0px 26px 0px rgba(0,0,0,0.06);
					padding: 20rpx 24rpx;
					.boxing();

					image {
						.square(26);
						margin-right: 12px;
					}
				}

				&list {
					padding: 24rpx;

					.sp-patient__footer text:last-child {
						.font(24, 32, #fff);
						padding-left: 20rpx;
					}
				}

				&item {
					.flex();
					.circle(702, 140, 20rpx);
					padding: 24rpx;
					margin-bottom: 24rpx;
					.shadow(0px 0px 26px 0px rgba(0,0,0,0.06));
					.back-color(#fff);
					.boxing();

					&- {

						&check {
							.square(30);
							background: url('@{cdn}patient/check.png') center no-repeat;
							background-size: cover;
						}

						&checked {
							.square(30);
							background: url('@{cdn}patient/checked.png') center no-repeat;
							background-size: cover;
						}

						&info {
							flex: 1;
							padding: 0 24rpx;

							text {
								display: block;

								&:nth-child(1) {
									.font(32, 46, #222, left);
								}

								&:nth-child(2) {
									margin-top: 10rpx;
									.font(26, 38, #666, left);
								}
							}
						}

						&edit {
							.square(30);
							background: url('@{cdn}patient/edit.png') center no-repeat;
							background-size: cover;
						}
					}
				}

				&form {
				 

					.sp-query__desc {
						padding: 0 24rpx;
					}

					&- {

						&alert {
							height: 72rpx;
							.font(28, 72, #6582F9, left);
							padding: 0 24rpx 0 62rpx;
							background: #EFF5FF url('@{cdn}cost/warning.png') 24rpx center no-repeat;
							background-size: 26rpx;
							.boxing();
						}

						&gets {
							// .flex();
							// flex-direction: column;
							position: relative;
							height: 110rpx;
							background: rgba(255, 129, 30, 0.06) url('@{cdn}patient/user.png') 24rpx center no-repeat;
							background-size: 45rpx 42rpx;
							padding-left: 89rpx;
							padding-top: 18rpx;
							.boxing();

							&:after {
								content: '';
								position: absolute;
								top: 50%;
								right: 24rpx;
								transform: translateY(-50%);
								.square(26);
								background: url('@{cdn}patient/arrow-orange.png') center no-repeat;
								background-size: cover;
							}

							text,
							label {
								display: block;
							}

							text {
								.font(24, 34, #666, left);
							}

							label {
								margin-top: 2rpx;
								.font(28, 40, #FF811E, left);
							}
						}

						&logo {
							height: 100rpx;
							padding-left: 107rpx;
							background: #fff url('@{cdn}patient/logo.png') 24rpx center no-repeat;
							background-size: 63rpx;
							.font(32, 100, #222, left);
							.boxing();
						}

						&person {
							margin: 10rpx 0;
							padding: 24rpx;
							.back-color(#fff);

							label,
							text {
								display: block;
							}

							label {
								padding: 0 0 18rpx;
								border-bottom: 1rpx solid #eee;
								.font(32, 46, #222, left);
							}

							text {
								margin-top: 18rpx;
								.font(28, 40, #666, left);
							}
						}

						&item {
							.flex();
							height: 100rpx;
							margin-bottom: 10rpx;
							padding: 0 24rpx;
							.boxing();
							.back-color(#fff);

							label {
								display: block;
								width: 230rpx;
								.font(28, 40, #666, left);
							}
						}

						&control {
							flex: 1;

							text {
								.font(28, 40, #222, left)
							}

							input {
								height: 100%;
								.font(28, 40, #222, left);
							}
						}

						&arrow {
							background: url('@{cdn}member/arrow.png') right no-repeat;
							background-size: 26rpx;
						}

						&right {
							.flex();
							justify-content: flex-end;
						}

						&submit {
							padding: 100rpx 46rpx 48rpx;
						}
					}
				}

				&bind {

					&- {

						&title {
							margin: 24rpx 0;
							.font(32, 46, #222, left);
						}

						&type {
							margin-bottom: 50rpx;
							padding-left: 56rpx;
							.font(28, 40, #222, left);
							background: url('@{cdn}patient/checked.png') left center no-repeat;
							background-size: 30rpx;
						}

						&card {

							& > label {
								display: block;
								.font(30, 46, #222, left);
								margin-bottom: 20rpx;
							}
						}

						&value {
							.flex();
							height: 100rpx;
							background-color: #F9FAFB;
							padding: 0 24rpx;
							.boxing();

							label {
								display: block;
								width: 106rpx;
								.font(30, 42, #666);
							}

							input {
								flex: 1;
								.font(30, 42, #222, left);
							}
						}

						&clear,
						&scan {
							.square(30);
							margin-left: 30rpx;
							background-position: center;
							background-size: cover;
						}

						&clear {
							background-image: url('@{cdn}patient/clear.png');
						}

						&scan {
							background-image: url('@{cdn}patient/scan.png');
						}

						&tips {
							.f-center-space();
							align-items: flex-start;
							.font(26, 38, #666, left);
							margin-top: 28rpx;

							text {
								display: block;
							}

							& > text {
								color: #6582F9;
								padding-right: 28rpx;
								background: url('@{cdn}patient/arrow.png') right no-repeat;
								background-size: 26rpx;
							}
						}

						&register {

							text:last-child {
								margin-top: 4rpx;
							}

							label {
								color: #6582F9;
							}
						}

						&submit {
							padding: 100rpx 30rpx;
						}
					}
				}

				&contact-item {
					.size(702, 280);
					.boxing();
					.radius(20);
					.back-color(#fff);
					border-top: 10rpx solid #6582F9;
					margin: 24rpx auto;
					padding: 0 24rpx;

					&- {

						&head {
							.flex();
							justify-content: center;
							height: 138rpx;
							background: url('@{cdn}member/arrow.png') 624rpx center no-repeat;
							background-size: 30rpx;
							border-bottom: 1rpx solid #eee;

							image {
								display: block;
								.square(86);
								background: #ccc;
								border-radius: 50%;
							}
						}

						&info {
							flex: 1;
							margin-left: 20rpx;

							label,
							text {
								display: block;
							}

							label {
								.font(28, 40, #222, left);
							}

							text {
								.font(24, 34, #666, left);
								margin-top: 6rpx;
							}
						}

						&body {
							padding-top: 24rpx;
							height: 132rpx;

							text {
								display: block;

								&:nth-child(1) {
									.font(28, 40, #222, left);
								}

								&:nth-child(2) {
									margin-top: 6rpx;
									.font(24, 40, #bbb, left);
								}
							}
						}
					}
				}
			}
		}

		// 公告
		&notice {
			padding: 0 24rpx;

			&__ {

				&item {

					&- {

						&date {
							height: 84rpx;
							.font(26, 84, #bbb);
						}

						&boxes {
							.back-color(#fff);
							.radius(20rpx);
							padding: 24rpx;
							.boxing();

							label {
								display: block;
								.font(32, 44, #222, left);
								font-weight: bold;
								margin-bottom: 24rpx;
							}

							text {
								.font(30, 42, #222, left);
							}
						}
					}
				}
			}
		}

		// 评价-医生首页
		&comment {

			&__ {

				&doctor {
					padding: 24rpx;

					&- {

						&info {
							.flex();
							height: 168rpx;
							padding: 24rpx;
							.radius(20);
							.back-color(#fff);
							.boxing();

							image {
								display: block;
								.circle(120, 120, 50%);
								margin-right: 30rpx;
								.back-color(#ccc);
							}
						}

						&name {
							label,
							text {
								display: block;
							}

							label {
								.font(42, 50, #222, left);
								margin-bottom: 12rpx;
							}

							text {
								.font(28, 40, #666, left);
							}
						}

						&title {
							margin: 36rpx 0 24rpx;
							.font(30, 42, #222, left);
						}

						&tags {
							.flex();
							flex-wrap: wrap;

							text {
								display: block;
								.size(220, 60);
								margin-bottom: 24rpx;
								.back-color(rgba(101, 130, 249, 0.08));
								.font(28, 60, #6582F9);
								transition: all .3s;

								&:not(:nth-child(3n + 1)) {
									margin-left: 20rpx;
								}

								&.active {
									color: #fff;
									background-color: #6582F9;
								}
							}
						}

						&text {
							height: 188rpx;
							padding: 24rpx;
							.boxing();
							.back-color(#fff);

							textarea {
								display: block;
								width: 100%;
								height: 100%;
								.font(24, 36, #222, left);
							}
						}

						&footer {
							padding: 100rpx 46rpx 0;
						}
					}
				}

				&list {
					padding: 24rpx;
				}

				&item {
					padding: 24rpx 0;
					border-bottom: 1rpx solid #ddd;

					&- {

						&header {
							.flex();
							justify-content: space-between;

							label {
								.font(28, 40, #333, left);
							}

							text {
								.font(24, 40, #666, right);
							}
						}

						&tags {
							padding: 16rpx 0;
							.flex();

							text {
								display: block;
								padding: 10rpx;
								.font(24, 34, #6582F9);
								margin-right: 18rpx;
								.back-color(rgba(101, 130, 249, 0.08));
							}
						}

						&desc {
							.font(28, 40, #222, left);
						}
					}
				}
			}
		}

		// 报告查询
		&report {

			.u-popup__content {
				background-color: #F9FAFB !important;
			}

			&__ {

				&list {
					padding: 24rpx 0;
				}

				&item {
					.radius(20rpx);
					.back-color(#fff);
					padding: 24rpx;
					margin-bottom: 24rpx;
					.boxing();
					overflow: hidden;

					.sp-button {
						.size(110, 50);
						.radius(10rpx);
						margin-top: 20rpx;
						float: right;
						.font(26, 50, #fff);
					}

					& > label {
						.font(30, 44, #222, left);
					}

					&-line {
						.flex();
						margin-top: 24rpx;

						label {
							display: block;
							width: 204rpx;
							.font(28, 40, #666, left);
						}

						text {
							.font(28, 40, #222, left);
						}
					}
				}

				&detail {
					padding: 24rpx 24rpx 118rpx;
					.boxing();

					&- {

						&desc {
							.radius(20rpx);
							.back-color(#fff);
							.boxing();
							padding: 0 24rpx 24rpx;
							margin-bottom: 24rpx;
							border-top: 10rpx solid #6582F9;

							& > label {
								display: block;
								.font(32, 100, #222);
								border-bottom: 1rpx dashed #6582F9;
								margin-bottom: 24rpx;
							}
						}

						&line {
							.flex();
							margin-top: 12rpx;

							label {
								display: block;
								width: 204rpx;
								.font(28, 40, #666, left);
							}

							text {
								.font(28, 40, #222, left)
							}
						}

						&error {
							.font(28, 40, #FF5F5F, left);
							padding: 0 0 0 38rpx;
							background: url('@{cdn}common/error.png') left 10rpx no-repeat;
							background-size: 26rpx;
						}

						&info {
							.back-color(#fff);
							.radius(20rpx);
							.boxing();
							padding: 0 24rpx;
							margin-bottom: 24rpx;
						}

						&tips {
							height: 160rpx;
							.font(28, 160, #222);
						}

						&item {
							padding: 24rpx 0;

							label,
							text {
								display: block;
							}

							label {
								.font(28, 40, #222, left);
								margin-bottom: 24rpx;
							}

							text {
								.font(30, 44, #222, left);
								padding-bottom: 16rpx;
							}

							&:not(:first-child) {
								border-top: 6rpx solid #EFF5FF;
							}
						}

						&project {
							height: 96rpx;
							.f-center-space();
							.boxing();
							border-bottom: 6rpx solid #EFF5FF;

							text,
							label {
									.font(28, 40, #222, left);
							}

							text {
								font-weight: bold;
							}
						}

						&sub {
							height: 130rpx;
							.f-center-space();
							.boxing();
							border-bottom: 1rpx solid #eee;

							image {
								display: inline-block;
								.square(24);
								margin-left: 10rpx;
							}

							view:first-child {
								max-width: 400rpx;
							}

							view > label,
							view > text {
								display: block;
							}

							view > label {
								.font(32, 44, #222, left);
							}

							view > text {
								.font(24, 32, #bbb, left);
								margin-top: 6rpx;
							}
						}

						&right text,
						&right label {
							text-align: right !important;
						}

						&result {

							& > label {
								display: block;
								padding: 36rpx 0 56rpx;
								.font(32, 46, #222);
							}
						}

						&pdf {
							.f-center-space();
							.size(702, 120);
							.back-color(#fff);
							.radius(20rpx);
							.boxing();
							padding: 0 24rpx;
							margin: 0 auto 24rpx;

							label {
								.font(30, 44, #222, left);
							}

							text {
								padding-left: 38rpx;
								.font(28, 40, #6582F9);
							}
						}

						&footer {
							position: fixed;
							left: 0;
							bottom: 0;
							z-index: 19;
							.flex();
							.size(750, 94rpx);
							.back-color(#fff);
							.shadow(0px 0px 26px 0px rgba(0,0,0,0.06));

							text {
								flex: 1;
								.font(32, 94, #6582F9);
							}
						}
					}
				}

				// 病例打印中的未/已支付支付列表
				&pay {

					&- {

						&header {
							.flex();
							justify-content: center;
							height: 88rpx;
							.back-color(#fff);
							.font(30, 88, #6582F9);
							border-top: 1rpx solid #eee;

							text {
								display: block;
								margin-right: 10rpx;
							}
						}

						&item {
							position: relative;
							.size(702, 314);
							.back-color(#fff);
							.radius(20rpx);
							padding: 24rpx;
							margin: 24rpx auto 0;
							.boxing();

							label,
							text {
								display: block;
							}

							label {
								.font(30, 42, #222, left);
							}

							text {
								.font(28, 40, #666, left);
								margin-top: 16rpx;
							}
						}

						&status {
							position: absolute;
							top: 27rpx;
							right: 24rpx;
						}

						&yes {
							color: #6582F9;
						}

						&no {
							color: #999;
						}

						&detail {
							padding: 24rpx;

							& > label {
								display: block;
								.font(42, 42, #222, left);
								margin-bottom: 24rpx;
							}
						}

						&desc {
							.back-color(#fff);
							.radius(20rpx);
							padding: 24rpx;
							margin: 24rpx auto;
							.boxing();
							.font(24, 36, #666, left);

							label {
								display: block;
								.font(24, 36, #333, left);
								margin-bottom: 10rpx;
							}

							text {
								.font(24, 36, #666, left);
							}
						}

						&submit {
							position: absolute;
							bottom: 44rpx;
							left: 70rpx;
							right: 70rpx;
						}

						&address {
							padding: 24rpx 24rpx 24rpx 50rpx;
							.radius(20rpx);
							margin-bottom: 24rpx;
							.boxing();
							.font(24, 36, #666, left);
							background: #fff url('@{cdn}common/address.png') 24rpx 32rpx no-repeat;
							background-size: 16rpx 20rpx;
						}
					}
				}
			}
		}

		// 病例打印
		&print {

			&__ {

				&list {
					padding: 24rpx 0;
				}

				&item {
					.back-color(#fff);
					.radius(20rpx);
					padding: 0 24rpx;
					.boxing();
					margin-bottom: 24rpx;

					& > view {
						height: 80rpx;
					}

					&- {

						&info {
							.font(28, 80, #666, left);

							text {
								padding-right: 10rpx;
							}
						}

						&name {
							.f-center-space();
							border-bottom: 1rpx solid #eee;

							label {
								.font(30, 80, #222, left);
							}

							text {
								.font(26, 80, #FF811E, right);
							}
						}
					}
				}
				
				&form {
					padding: 24rpx;
					
					&- {
						
						&boxes {
							.back-color(#fff);
							.radius(20rpx);
							padding: 24rpx;
							.boxing();
						}
						
						&item {
							.flex();
							height: 90rpx;
							border-bottom: 1rpx solid #eee;
							
							label {
								display: block;
								width: 140rpx;
							}
						}
						
						&control {
							flex: 1;
							display: flex;
							justify-content: flex-end;
						}
						
						&check {
							.flex();
							
							text {
								display: block;
								background: url('@{cdn}sms/check.png') left 8rpx no-repeat;
								background-size: 28rpx;
								padding-left: 34rpx;
								.font(28, 40, #999, left);
								margin-left: 38rpx;
								
								&.active {
									background: url('@{cdn}sms/checked.png') left 8rpx no-repeat;
									background-size: 28rpx;
								}
							}
						}
						
						&tags {
							.flex();
							
							text {
								display: block;
								.size(160, 60);
								.font(28, 60, #333);
								.back-color(#f6f6f6);
								margin-right: 24rpx;
							}
						}
						
						&input {
							padding: 24rpx 0;
							border-bottom: 1rpx solid #eee;
							
							input {
								width: 100%;
								height: 80rpx;
								.font(28, 80, #999, left);
								padding: 24rpx;
								.boxing();
								background-color: #F6F6F6;
							}
						}
						
						&type {
							
							text {
								.font(28, 40, #999, left);
							}
						}
						
						&title {
							label {
								display: block;
								.font(30, 92, #222, left);
							}
						}
						
						&flex {
							.f-center-space();
						}
						
						&upload {
							border-bottom: 1rpx solid #eee;
							
							image {
								display: block;
								.size(310, 202);
							}
							
							text {
								display: block;
								padding: 24rpx 0;
								.font(28, 40, #999);
							}
						}
						
						&desc {
							margin-top: 24rpx;
							.font(24, 34, #999, left);
						}
						
						&submit {
							padding: 30rpx 46rpx;
						}
					}
				}
			}
		}

		// 发票
		&invoice {

			&__ {

				&header {
					position: fixed;
					top: 0;
					left: 0;
				}

				&list {
					padding: 110rpx 24rpx 24rpx;
				}

				&item {
					.radius(20rpx);
					.boxing();
					.back-color(#fff);
					padding: 24rpx;
					margin-bottom: 20rpx;

					text {

						.font(28, 40, #666, left);
					}

					& > text {
						display: block;

						&:not(:first-child) {
							margin-top: 16rpx;
						}
					}
				}
			}
		}
	}
}
